<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }
    </style>
</head>

<body>

    <div id="box">

    </div>

</body>
<script>

    /* es5 里面 this 的指向是非常不明确的，很容易搞错，es6的箭头函数就是为弥补
    es5 里面this的指向问题
    */

    /* es5 常见的写法，注意事项
    
    需求：希望点击一个 div 盒子，2s后，背景变红色 */
    const oBox = document.getElementById('box');

    oBox.onclick = () => {
        // 事件回调函数里面的 this 代表当前的 dom 对象
        // this.style.backgroundColor = 'red';
        // es6 里面的解决方法 使用箭头函数即可
        setTimeout(() => {
            console.log(this, '定时器里面的this');
            this.style.backgroundColor = '#f00';

        }, 2000);

    }
</script>

</html>